<template>
  <basic-layout title="商品选购" :showAddBtn="false">
    <van-row class="search-row">
      <van-search
        v-model="keyword"
        maxlength="20"
        show-action
        placeholder="请输入商品名称"
      >
        <template #action>
          <div @click="getSearch">搜索</div>
        </template>
      </van-search>
    </van-row>
    <div class="applyBox">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange" style="width: 100%">
          <van-sidebar-item
            v-for="item in menuList"
            :key="item.categoryCode"
            :title="item.categoryName"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div v-show="!showTable" v-for="(item, i) in shopList" :key="i">
          <h5>{{ item.networkName }}</h5>
          <van-grid :column-num="3" :border="false">
            <van-grid-item
              v-for="val in item.siteCategoryVOS"
              :key="val.siteCategoryId"
              :icon="
                fileurl[val.fileCode] ||
                (loading ? 'images/loading.gif' : 'images/noImgData.png')
              "
              :text="val.categoryName"
              @click="handleClick(val)"
            />
          </van-grid>
        </div>
        <div v-if="showTable">
          <h5>热门分类</h5>
          <van-grid :column-num="3" :border="false">
            <van-grid-item
              v-for="item in applyList"
              :key="item.categoryCode"
              :icon="
                fileUrlObj[item.fileCode] ||
                (loading ? 'images/loading.gif' : 'images/noImgData.png')
              "
              :text="item.categoryName"
              @click="handleClick(item)"
            />
          </van-grid>
        </div>
      </div>
    </div>
    <full-loading v-if="spinLoading"></full-loading>
  </basic-layout>
</template>

<script>
import { queryFileList } from "@/api/common";
import { queryGetList, queryNetwork } from "@/api/srvAssurance/shoppingMall";
export default {
  data() {
    return {
      loading: false,
      spinLoading: false,
      showTable: false,
      keyword: "", // 搜索关键字
      activeKey: 0,
      menuList: [],
      applyList: [],
      shopList: [],
      fileUrlObj: {},
      fileurl: {},
      value: "",
    };
  },
  created() {
    this.queryStaffMenuData();
  },
  methods: {
    // 点击侧边菜单标签
    onChange(index) {
      let code = this.menuList[index].categoryCode;
      if (!code) {
        this.showTable = false;
        this.queryShop();
      } else {
        this.showTable = true;
        this.queryList(code);
      }
    },
    queryList(code) {
      this.spinLoading = true;
      queryGetList(code)
        .then((res) => {
          this.spinLoading = false;
          if (res.code === 1000 && res.data) {
            this.applyList = res.data;
            let fileCodeArr = [];
            res.data.forEach((val, i) => {
              if (val.fileCode && !this.fileUrlObj[val.fileCode]) {
                fileCodeArr.push(val.fileCode);
                this.fileUrlObj[val.fileCode] = "";
              }
            });
            if (fileCodeArr.length) {
              this.queryFileInfoData(fileCodeArr);
            }
          }
        })
        .catch(() => {
          this.spinLoading = false;
        });
    },
    queryShop() {
      this.spinLoading = true;
      queryNetwork()
        .then((res) => {
          if (res.code === 1000 && res.data) {
            this.shopList = res.data;
            res.data.forEach((val, i) => {
              val.siteCategoryVOS.forEach((item) => {
                let fileCodeArr = [];
                if (item.fileCode && !this.fileurl[item.fileCode]) {
                  fileCodeArr.push(item.fileCode);
                  this.fileurl[item.fileCode] = "";
                }
                if (fileCodeArr.length) {
                  this.queryFileData(fileCodeArr);
                }
              });
            });
          }
          setTimeout(() => {
            this.spinLoading = false;
          }, 400);
        })
        .catch(() => {
          this.spinLoading = false;
        });
    },

    // 点击子应用
    handleClick(item) {
      let data = {
        networkId: item.networkId,
        siteCategoryId: item.siteCategoryId,
        pcategoryCode: item.categoryCode,
      };
      this.$router.push({
        path: "goodsList",
        query: {
          value: data,
        },
      });
    },
    getSearch() {
      if (this.keyword && !this.$commonReg.textReg.test(this.keyword)) {
        this.$Notify({
          type: "warning",
          message: `关键字${this.$commonReg.textMsg}`,
        });
        return;
      }
      this.$router.push({
        path: "goodsList",
        query: {
          data: this.keyword,
        },
      });
    },
    // 查询用户菜单
    queryStaffMenuData() {
      this.spinLoading = true;
      queryGetList("-1")
        .then((res) => {
          this.spinLoading = true;
          if (res.code === 1000 && res.data) {
            this.menuList = [
              {
                categoryCode: "",
                categoryName: "店铺",
              },
              ...res.data,
            ];
            this.onChange(0);
          }
        })
        .catch(() => {
          this.spinLoading = true;
        });
    },
    // 获取图片信息
    queryFileInfoData(fileCodeArr) {
      this.loading = true;
      queryFileList(fileCodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.url;
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    queryFileData(fileCodeArr) {
      this.loading = true;
      queryFileList(fileCodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileurl[item.fileCode] = item.url;
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="less">
/deep/.van-nav-bar__content {
  background: #1e93ff;
  .van-nav-bar__title {
    color: #fff;
  }
}
/deep/.van-icon__image {
  width: 2em;
  height: 2em;
}
.applyBox {
  display: flex;
  height: calc(100% - 54px);
  .left {
    width: 88px;
    /deep/ .van-sidebar-item {
      background: #fff;
    }
    /deep/.van-sidebar-item--select::before {
      position: unset;
    }
    /deep/ .van-sidebar-item--select {
      color: #e43350;
    }
  }
  .right {
    flex: 1;
    height: calc(100% - 54px);
    overflow: auto;
    h5 {
      color: #283f65;
      font-size: 16px;
      line-height: 22px;
      padding-left: 12px;
      margin-top: 16px;
    }
    /deep/.van-grid-item__text {
      text-align: center;
      // min-height: 38px;
    }
  }
}
</style>
